<script setup lang="ts">
import { computed } from 'vue'
import { Icon } from '@/components/Icon'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { useNotificationStore } from '@/store/modules/notification'
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'

const { getPrefixCls } = useDesign()

const notificationStore = useNotificationStore()

const prefixCls = getPrefixCls('message')

defineProps({
  color: propTypes.string.def('')
})

const getNotification = () => {
  notificationStore.fetchData()
}

const notificationCount = computed(() => notificationStore.getCount)
const notifications = computed(() => notificationStore.getNotifications)
const notificationInstances = computed(() => notificationStore.getNotificationInstances)
</script>

<template>
  <div :class="prefixCls" @click="getNotification">
    <ElDropdown :class="prefixCls" trigger="hover" popper-class="message-popper">
      <el-badge :value="notificationCount ? notificationCount : ''" style="height: 18px">
        <Icon :size="18" icon="iconamoon:notification" :color="color" />
      </el-badge>
      <template #dropdown>
        <ElDropdownMenu>
          <ElDropdownItem
            v-for="nt in notifications"
            :key="nt.key"
            @click="nt.show(nt, notificationInstances)"
          >
            <el-badge :value="nt.count ? nt.count : ''" style="height: 18px">
              <div>{{ nt.title }}</div>
            </el-badge>
          </ElDropdownItem>
        </ElDropdownMenu>
      </template>
    </ElDropdown>
  </div>
</template>
<style lang="less">
.message-popper {
  .el-dropdown-menu__item {
    padding: 10px 30px;
  }
}
</style>
